<%- content_for(:head) do -%>
  <title>::NoiseTube:: City <%= @city.name  %></title>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAEDqSJ7sjOq1o3M9HFMUctBT0NiLLVHrVqet-Tka_0tk-YB2j8RThZNhTM6xrex3wBLzNXKA57-KJww"
          type="text/javascript"></script>
  <%=  javascript_include_tag 'city' %>          
<%- end -%>

  
    
    

<!-- <link  rel="StyleSheet" type="text/css" href="http://www.muffinresearch.co.uk/lab/tableshow/muffin.css"  media="screen"> </link>
-->
<style type="text/css">
  body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
  }
  .style3 {
    font-size: 10px
  }
  .style4 {
    font-size: 14px;
    font-weight: bold;
  }
  .style5 {
    font-size: 18px
  }
  .style6 {
    font-size: 16px;
    font-weight: bold;
  }
  .style7 {
    font-size: 14px
  }
  
  .list_contributions .image_picture{
    float:left;
    padding-left:2px;
    padding-right:2px;
    width:50px;
  }
  
  .list_contributions .info{
    float:left;
    width:160px;
  }
  
  .list_contributions li { 
    list-style-type:none;
    padding:5px 2px 5px 2px;
    margin:0px;
    display: block;
    border-bottom: 1px solid #e4e4e4; 
    vertical-align: middle;
    height:50px;
    width:220px;
    float: none;
  }
  
  .list li a:hover {
    color                 : #003366;
    text-decoration       : none;
  }
  
  .list li:hover{
    color                 : #454545;
  }
  
  
  .tagList { margin:0; padding:0; }
  .contributorList li { list-style-type:none; float:left; margin:0 2px; height:45px; }
  .tagList li { list-style-type:none; float:left; margin:0 2px; height:15px; }
  .tagList li a { text-decoration:none; }
  .tagList li a:hover { text-decoration:underline; }
  .css1 { font-size: 1.0em; }
  .css2 { font-size: 1.2em; }
  .css3 { font-size: 1.4em; }
  .css4 { font-size: 1.6em; }
</style>

<style type="text/css">
  <!--
  .Style1 {
    font-size: 100%;
    font-weight: bold;
  }
  .Style2 {font-size: 18px}
  -->
</style>

  <%
  t=[]
  @city.tracks.each{|track|
    if track.geolocated
      bbox=track.geom.envelope
      geopart="null"
      geopart=", new GLatLng(#{bbox.center().lat},#{bbox.center().lng}), new GLatLngBounds(new GLatLng(#{bbox.lower_corner.lat},#{bbox.lower_corner.lng}),new GLatLng(#{bbox.upper_corner.lat},#{bbox.upper_corner.lng})),\"#{track.image_relative_url}\"" 
    end
    
    t<<" #{track.id} : [ #{track.count || 0}, #{track.geolocated} #{geopart}]"  
  }
%>
<script type="text/javascript">
    var center= new GLatLng(<%=@city.lat%>, <%=@city.lng%>);
    var tracks=[<%= t.join(",")%>];
    
 
</script>
<center><h2><%= @city.name  %></h2></center>
<div align="right"><a href="#" alt="Basic Tasks to which you can contribute in this page?"><b style="font-size:19px">Want to contribute?</b><br/>(We can suggest you basic tasks to do)</a></div>
<div align="center" style="float:left;width:220px"><table width="210" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding-top:20px"><h2>Sound Level data</h2>
        <p><b>Loudness distribution - dB(A)</b>
          <img alt="Loading..." id ="leqWait" src="images/icons/load.gif" style="display:none" />
          <img alt="Loudness distribution" id ="leqDistImg" src="" onload="leq_complete()"/>
        </p>
        <p><b>Daily distribution</b>
          <img alt="Loading..." id ="timeWait" src="images/icons/load.gif" style="display:none" />
      <img alt="Time distribution" src="" id="timeDistImg" onload="time_complete()"/></p></td>
    </tr>
    
    <tr>
      <td style="padding-top:20px"><h3>Who measured there?</h3>
              <ul class="list_contributions">
              <li>          
                <div class="image_picture">
                  <a href="/users/51575"><img alt="nico" class="avatar" src="images/default_user.gif" title="nico"/></a>
                </div>
                <div class="info"><div style="float:top"><a href="#"><font color="#AAAAAA">Level: expert
                <br/>220 measures - 12 tags</a>
                  </div>
                  <div style="float:top">
                    <div style="float:left;"><a href="javascript:display_track(1);" title="show the track on the map">Related tracks</a></div>
                  <div style="height:20px;float:right;align:right;margin-left:5px;vertical-align: top;"><img src="images/icons/attention.gif"/><a href="javascript:report_spam(1);" title="Report a problem" style="margin-left:2px;padding-bottom:4px">report pb</a></div></div>
                </div>  
              </li> 
              <li>
                <div style="float:left"></div>
                <div style="float:left;padding-left:2px;padding-right:2px"><a href="/users/51575"><img alt="nico" class="avatar" src="images/default_user.gif" title="nico"/></a>
                </div>
                <div style="float:left"><font color="#AAAAAA">11:32 AM </font> 
                  <br/>220 measures  - 12 tags
                <br/><font color="#AAAAAA">Distance: 1200m </font></div>      
              </li>
              <li>
                <div style="float:left"></div>
                <div style="float:left;padding-left:2px;padding-right:2px"><a href="/users/51575"><img alt="nico" class="avatar" src="images/default_user.gif" title="nico"/></a>
                </div>
                <div style="float:left"><font color="#AAAAAA">11:32 AM </font> 
                  <br/>220 measures - 12 tags
                <br/><font color="#AAAAAA">Coverage: 1200m </font></div>      
              </li>
              <li>
                <div style="float:left"></div>
                <div style="float:left;padding-left:2px;padding-right:2px"><a href="/users/51575"><img alt="nico" class="avatar" src="images/default_user.gif" title="nico"/></a>
                </div>
                <div style="float:left"><font color="#AAAAAA">11:32 AM </font> 
                  <br/>220 measures - 12 tags
                <br/><font color="#AAAAAA">Coverage: 1200m </font></div>      
              </li>
            </ul>
      </td>
      <td style="padding-top:10px;display:none">  <b>Related tag cloud</b>
        
      </td>
    </tr>
    
</table></div>

<div style="float:left">
  <div id="map_canvas" style="width:480px; height: 500px"></div>
</div>
<div style="float:left;width:210px">
  
  <div>
    <table>
      <tr>
        <td style="padding-top:30px"> <h2>Qualitative data</h2> 
          
          <h3>General opinion</h3>
          <a href="#">Add yours</a>, <a href="#">See comments (2)</a>
          <img alt="Opinion distribution" src="http://localhost:3000/api/opiniondist.png" />
          <br/>
          
          
          <form>
            <div>
              <h3>Annotation</h3>
              <a href="javascript:show_all_tags();">Show all</a>,<a href="javascript:hide_all_tags();">Hide all</a>
              <img alt="Loading..." id ="tagWait" src="images/icons/load.gif" style="display:none" />
              <ul class="tagList" id="tagList"></ul> 
            </div>
        </form></td>
      </tr>
      <tr>
        <td style="padding-top:10px;display:none" id="tagDist"><b>Related loudness for tag:</b> <span id="tagname"></span>
          <img alt="Tag distribution" src="#" id="tagDistImg"/>
        </td>
      </tr>
      <tr> 
    
    <td style="padding-top:20px"><a>Start watching Contributions</a>
    <h2>Issues Tracker</h2>
       Call for contribution in this area
    <!-- <h3>Recent Contributions</h3>
            <ul class="list_contributions">
              <li>          
                <div class="image_picture">
                  <a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
                </div>
                <div class="info"><div style="float:top"><a href="#"><font color="#AAAAAA">11:32 AM 
                        <br/>220 measures - 12 tags                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
                    <br/>Distance: 1200m </font></a>
                  </div>
                  <div style="float:top">
                    <div style="float:left;"><a href="javascript:display_track(1);" title="show the track on the map">show</a></div>
                  <div style="height:20px;float:right;align:right;margin-left:5px;vertical-align: top;"><img src="http://lib.store.yahoo.net/lib/yhst-68032344640492/attention.gif"/><a href="javascript:report_spam(1);" title="Report a problem" style="margin-left:2px;padding-bottom:4px">report pb</a></div></div>    
                </div>  
              </li> 
              <li>
                <div style="float:left"></div>
                <div style="float:left;padding-left:2px;padding-right:2px"><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
                </div>
                <div style="float:left"><font color="#AAAAAA">11:32 AM </font> 
                  <br/>220 measures  - 12 tags
                <br/><font color="#AAAAAA">Distance: 1200m </font></div>      
              </li>
              <li>
                <div style="float:left"></div>
                <div style="float:left;padding-left:2px;padding-right:2px"><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
                </div>
                <div style="float:left"><font color="#AAAAAA">11:32 AM </font> 
                  <br/>220 measures - 12 tags
                <br/><font color="#AAAAAA">Coverage: 1200m </font></div>      
              </li>
              <li>
                <div style="float:left"></div>
                <div style="float:left;padding-left:2px;padding-right:2px"><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
                </div>
                <div style="float:left"><font color="#AAAAAA">11:32 AM </font> 
                  <br/>220 measures - 12 tags
                <br/><font color="#AAAAAA">Coverage: 1200m </font></div>      
              </li>
            </ul>
          </div>
          <div><h3>Top Contributors</h3>
            <ul class="contributorList"><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
              </li><li><a href="/users/51575"><img alt="nico" class="avatar" src="http://binarylogic.lighthouseapp.com/images/avatar.gif" title="nico"></a>
            </li></ul>
          </div>-->
        </td>
            </tr>
    </table>
    
  </div>
</div>


